<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  table {
    border: 2px solid green;
    border-collapse: collapse;
    padding: 5px 20px;
    text-align: center;
  }

  table tr:nth-child(1) {
    background-color: #DDD;
  }

  table tr:not(:first-child):hover {
    background-color: #EEE;
  }

  table th {
    border: 2px solid green;
    font-weight: 400;
  }

  table td {
    border: 2px solid green;
    padding: 20px 50px;
  }
</style>

<body>
  <h2>学生信息</h2>
  <p>将数据渲染到页面中...</p>
  <table>
    <caption>学生列表</caption>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>家乡</th>
    </tr>

    <script>
      let stu = [{
          name: "xiaoming",
          age: 18,
          gender: "male",
          hometowm: "guangdong"
        },
        {
          name: "xiaohong",
          age: 18,
          gender: "female",
          hometowm: "guangdong"
        },
        {
          name: "xiaomgang",
          age: 19,
          gender: "male",
          hometowm: "guangdong"
        },
        {
          name: "xiaomi",
          age: 17,
          gender: "female",
          hometowm: "guangdong"
        },
      ]

      for (let i = 0; i < stu.length; i++) {
        document.write(`
          <tr>
            <td>${i+1}</td>
            <td>${stu[i].name}</td>
            <td>${stu[i].age}</td>
            <td>${stu[i].gender}</td>
            <td>${stu[i].hometowm}</td>
          </tr>
      `)
      }
    </script>
  </table>


</body>

</html>